<template>
    <div>
        app
        <div>
            {{obj.name}}
        </div>
        <div>
            {{obj.age}}
        </div>
        <button @click="handleClick">按钮</button>
    </div>
</template>

<script>
import { reactive } from 'vue'
export default {
    //setup函数
    setup () {

        // 经过reactive包装后，obj.name和obj.age都是响应式的
        // 最好使用const声明一个变量
        const obj =  reactive({
            name:"zd",
            age:18
        })

        // const定义一个函数
        const handleClick=()=>{
            console.log('点击了按钮');
            //访问对象中的属性进行重新赋值
            obj.name="zs"
            obj.age=19
        }

        // 返回变量或函数，供模板使用
        return {
            obj,
            handleClick
        }

    }
}
</script>

<style>

</style>